<!doctype html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css">
		<script src="js/vue.min.js"></script>
		<title>购物车</title>
	</head>
	<body>
		<div id="app">
			<cart-component></cart-component>
		</div>
		<!-- Optional JavaScript -->
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="js/jQuery/jquery-3.4.1.slim.min.js"></script>
		<script src="js/bootstrap/popper.min.js"></script>
		<script src="js/bootstrap/bootstrap.min.js"></script>


		<script>
			//局部组件的声明:购物车的标题
			const cartTitle = {
				props:['uname'],
				template: `<div class="row justify-content-center">
							<div class="col-6  text-center bg-info py-3">
								<strong>{{uname}}的购物车</strong>
							</div>
			             </div>`
			}
			const cartTotal = {
				template: `<div class="row justify-content-center mb-2">
							<div class="col-6  text-right bg-success py-2">
								<strong>总价:1000</strong> <button>结算</button>
							</div>
						  </div>`
			}

			const cartItems = {
				props:['list'],
				template: `<div class="row justify-content-center mt-2 ">
				<div class="col-6 text-center">
					<table class="table table-striped table-bordered  text-center mb-2">
						<thead>
							<tr>
								<td>商品名称</td>
								<td>价格</td>
								<td>数量</td>
								<td>操作</td>
							</tr>
						</thead>
						<tbody>
							<tr v-for='product in list' :key='product.id'>
								<td>{{product.name}}</td>
								<td>{{product.price}}</td>
								<td>
									<div class="input-group input-group-sm">
										<div class="input-group-prepend">
											<button class="btn btn-outline-secondary" type="button">+</button>
										</div>
										<input type="text" style='width:10px'    class="form-control" >
										<div class="input-group-append">
											<button class="btn btn-outline-secondary" type="button">-</button>
										</div>
									</div>
								</td>
								<td>
									<button>删除</button>
								</td>
							</tr>							 
						</tbody>
					</table>
				</div>
			</div>`
			}

			Vue.component("cart-component", {
				data(){
					return {
						uname:'Haoren',
						products:[
							{
								id:1001,
								name:'java核心技术',
								price:100,
								num:1
							},
							{
								id:1002,
								name:'java从入门到放弃',
								price:200,
								num:1
							},
							{
								id:1003,
								name:'27天精通java',
								price:100,
								num:1
							},
							{
								id:1004,
								name:'Java的艺术',
								price:100,
								num:2
							},
							{
								id:1005,
								name:'Java的前世今生',
								price:100,
								num:1
							},
							{
								id:1006,
								name:'Java高级编程',
								price:100,
								num:2
							}
						]
					}
				},
				template: `<div class="container mt-5">
								<cart-title :uname='uname'></cart-title>   
								<cart-items :list='products'></cart-items>
								<cart-total></cart-total>
						   </div>`,
				components: {
					'cart-title': cartTitle,
					'cart-items': cartItems,
					'cart-total': cartTotal
				}
			})

			const vm = new Vue({
				el: '#app',
				data: {

				}
			});
		</script>
	</body>
</html>
